require('./VoteInfo.less');

import {Control} from "react-keeper";
import {Grid, List, WingBlank, WhiteSpace, Button} from "antd-mobile";

const Item = List.Item;

import * as React from "react";
import Reflux from 'reflux';
import {Link} from "react-keeper";

import Actions from './Actions';
import * as ReactMixin from "react-mixin";
import Store from "./Store";

import iconStartTime from '../../../../assets/icon/vote/start.png';
import iconEndTime from '../../../../assets/icon/vote/end.png';
import iconRoleIntroduce from '../../../../assets/icon/vote/role.png';
import iconDistrictIntroduce from '../../../../assets/icon/vote/introduce.png';
import iconDistrict from '../../../../assets/icon/vote/district.png';
import iconDefault from '../../../../assets/icon/vote/default-img.png';

class VoteInfo extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    Actions.initState(Control.state);
  }

  onVote(props) {
    let district = this.state.vi.allDistrict.map(d => {
      if (d.districtId === props.districtId) {
        d.voteCount = d.voteCount + 1;
      }
      return d;
    });
    district.voteCount = district.voteCount++;
    this.setState({
      vi: {allDistrict: district}
    });
  }

  render() {

    let t = this;

    return (

      <div>
        <List
          renderHeader={() => <div><img style={{width: '12px', height: '12px'}} src={iconStartTime} /><span>开始时间</span></div>}>
          <Item>
            <span>{this.state.vi.startTime.slice(0, 10)}</span>
          </Item>
        </List>
        <List
          renderHeader={() => <div><img style={{width: '12px', height: '12px'}} src={iconEndTime} /><span>结束时间</span></div>}>
          <Item>
            <span>{this.state.vi.endTime.slice(0, 10)}</span>
          </Item>
        </List>
        <List
          renderHeader={() => <div><img style={{width: '12px', height: '12px'}} src={iconRoleIntroduce} /><span>投票规则</span></div>}>
          <Item wrap>
            {this.state.vi.roleIntroduce}
          </Item>
        </List>
        <List
          renderHeader={() => <div><img style={{width: '12px', height: '12px'}} src={iconDistrictIntroduce} /><span>我的小区</span></div>}>
          <Item>
            <Grid
              columnNum={2}
              itemStyle={{ height: '200px' }}
              square="false"
              hasLine={false}
              data={this.state.vi.myDistrict}
              renderItem={(item) => (
                <Link to={'/home/fa/d/'+ this.state.vi.voteId + '/' + item.id} state={{title: this.state.vi.title, description: this.state.vi.description, voteId: this.state.vi.voteId, ...item}}>
                  <div className="district-item">
                    <img src={iconDefault} />
                    <div className="title"><span>{item.name}</span></div>
                    <div className="vote-count">
                      <span>{item.isVoted ? '已投票' : '进入投票'}</span>
                    </div>
                  </div>
                </Link>
              )}
            />
          </Item>
        </List>
        <List
          renderHeader={() => <div><img style={{width: '12px', height: '12px'}} src={iconDistrict} /><span>全部小区</span></div>}>
          <Item>
            <Grid
              columnNum={2}
              hasLine={false}
              itemStyle={{ height: '200px' }}
              square="false"
              data={this.state.vi.allDistrict}
              renderItem={(item) => (
                <div className="district-item">
                  <img src={iconDefault} />
                  <div className="title"><span>{item.name}</span></div>
                </div>
              )}
            />
          </Item>
        </List>
      </div>
    );
  }

}

ReactMixin.onClass(VoteInfo, Reflux.connect(Store, 'vi'));

export default VoteInfo;
